<template>
	<view class="container relative"
		:style="{background:`url(${$img('/static/img3/ta_2.png')}) no-repeat 0 0 / 100% 100%`}">
		<uni-nav-bar title="爬塔" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true"
			@clickLeft="$c.back()">
			<view class="uni-nav-bar-l-icon" slot="left">
				<view class="uni-nav-bar-l-icon-left icon">
					<image :src="$img('/static/img2/cc20.png')" lazy-load></image>
				</view>
			</view>
		</uni-nav-bar>
		<view class="box_climb">
			<view class="climb_item relative f-c-c z-2">
				<image :src="$img('/static/img3/ta2_1.png.png')" class="absolute z-8"
					style="width: 196rpx;height: 196rpx;top: 56rpx;" @click="openFirstClear"></image>
				<image :src="$img('/static/img3/climb_3.png')" class="climb_img-3"></image>
			</view>
			<view class="climb_item relative f-c-c z-2" v-for="(item,index) in climbList" :key="index"
				@click.stop="goClimbDetail(item)">
				<image :src="$img(`/static/img3/climb_${item.is_unlock==2?'light':'dark'}.png`)" class="climb_img"
					:class="item.className"></image>
				<view class="absolute floor f-c-c z-2">
					<image :src="$img(`/static/img3/climb_num_${climbList.length-index}.png`)" class="wh100"></image>
				</view>
			</view>
			<view class="climb_item relative f-c-c">
				<image :src="$img('/static/img3/climb_2.png')" class="climb_img-2"></image>
			</view>
		</view>
		<!-- <view class="box_1 fixed  f-c j-s z-9">
			<view class="box1_music">
				<image @click="pauseMusic" v-if="isPLayMusic" :src="$img('climb_9.png')" class="wh100 rotate_animation">
				</image>
				<image @click="pLayMusic" v-else :src="$img('climb_8.png')" class="wh100 "></image>
			</view>
			<view class="f-c">
				<view class="box1_item f-c">
					<image :src="$img('climb_10.png')" class="box1_icon"></image>
					<view class="ml6">{{keyNum || 0}}</view>
				</view>
				<view class="box1_item f-c ml30">
					<image :src="$img('climb_11.png')" class="box1_icon"></image>
					<view class="ml6">{{luckNum || 0}}</view>
				</view>
			</view>
		</view> -->
		<view class="box_2 fixed z-9"
			:style="{background:`url(${$img('/static/img3/ta_3.png')}) no-repeat 0 0 / 100% 100%`}">
			<view class="rank_head relative z-2 f-c-c">
				<image :src="$img('/static/img3/ta_4.png')" class="wh100"></image>
			</view>
			<view class="rank_list relative ">
				<view class="rank_item f-c j-s mb20" v-for="(item,index) in rankList" :key="index">
					<view class="f-c">
						<image :src="$img(`/static/img3/climb_rank_${index + 1}.png`)" class="rank_icon"></image>
						<view class="name omit ml8">{{item.nickname||'111'}}</view>
					</view>
					<view class="topNum">
						{{item.number}}
					</view>
				</view>
				<view class="look_more f-c-c t-no" @click="goRank">
					<image :src="$img('/static/img3/ta_5.png')" style="width: 16rpx;height: 16rpx;"></image>
					<text class="ml6">查看更多</text>
				</view>
			</view>
		</view>
		<view class="box_3 fixed z-9">
			<view class="box3_icon mb34" @click="isPLayMusic?pauseMusic():pLayMusic()">
				<image :src="$img(isPLayMusic?'/static/img3/ta_6.png':'/static/img3/ta_11.png')" class="wh100"></image>
			</view>
			<view class="box3_icon mb34" @click="$refs.rulePop.getRule(22, '购买说明')">
				<!-- 规则 -->
				<image :src="$img('/static/img3/ta_7.png')" class="wh100"></image>
			</view>
			<view class="box3_icon" @click="init(true)">
				<!-- 刷新 -->
				<image :src="$img('/static/img3/ta_8.png')" class="wh100"></image>
			</view>
		</view>
		<uni-popup ref="firstClear" type="center">
			<view class="f-d-c f-c-c">
				<view class="mask_1 relative"
					:style="{background:`url(${$img('/static/img3/ta_15.png')}) no-repeat 0 0 / 100% 100%`}">
					<view class="item_title f-c-c">通关奖励</view>
					<view class="item_explain f-c-c mt20">通关后将在以下奖励中随机抽取一个</view>
					<scroll-view scroll-y="true" class="mt30" style="height: 750rpx;">
						<view class="f-c f-w">
							<view class="mb40 relative" v-for="(item,index) in currentFirst" :key="item.id"
								:class="{mr24:index%3!=2}">
								<view class="item_goods mt30 relative">
									<view class="itme_change absolute f-c-c t-no">概率{{item.gailv}}</view>
									<image :src="item.imgurl" class="wh100"></image>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>
				<image :src="$img('/static/img3/ta_16.png')" class="mask_btn mt60" style="width: 196rpx;height: 78rpx;"
					@click="$refs.firstClear.close()" />
			</view>
		</uni-popup>

		<rule-pop ref="rulePop"></rule-pop>
	</view>
</template>

<script>
	var _A, vm, audio;
	export default {
		data() {
			return {
				climbList: [],
				isPLayMusic: false,
				isShowRefresh: false,
				keyNum: 0,
				luckNum: 0,
				musicUrl: '',
				detail: {},
				rankList: [],
				currentFirst: [],
				currentFloor: 0,
				id: 0
			}
		},
		onLoad(opt) {
			_A = this._A;
			vm = this
			vm.id = opt.id
		},
		onShow() {
			vm.isPLayMusic = uni.getStorageSync('isPLayMusic') || false
			vm.init()
		},
		onReady() {},
		methods: {
			init(type = false) {
				vm.req({
					url: 'climb',
					data: {
						goods_id: vm.id
					},
					success: res => {
						if (type) {
							uni.showToast({
								title: '刷新成功',
								icon: 'none'
							})
						}
						vm.climbList = res.data.list
						vm.currentFloor = res.data.num
						vm.musicUrl = res.data.bgk_music
						vm.detail = res.data.climb
						vm.rankList = res.data.ranks
						if (vm.isPLayMusic) vm.pLayMusic()
					}
				})
			},
			// 播放音乐
			pLayMusic() {
				if (audio) audio.destroy()
				audio = uni.createInnerAudioContext()
				audio.src = vm.musicUrl
				audio.seek(0)
				audio.play()
				vm.isPLayMusic = true
			},
			// 暂停音乐
			pauseMusic() {
				if (audio) audio.pause()
				vm.isPLayMusic = false
			},
			goClimbDetail(item) {
				if (item.is_unlock === 2) {
					uni.navigateTo({
						url: `/package/index/climbDetail?id=${vm.detail.id}&num=${item.num}`
					})
				}
			},
			goRank() {
				// _A.go(`/package/index/climbRank?id=${detail.id}`)
				uni.navigateTo({
					url: `/package/index/climbRank?id=${vm.detail.id}`
				})
			},
			// 打开首通奖励弹窗
			openFirstClear() {
				vm.req({
					url: 'end_prize_list',
					data: {
						goods_id: vm.detail.id
					},
					success: res => {
						vm.currentFirst = res.data
						vm.$refs.firstClear.open()
					}
				})

			},
			// 重新攀登
			anewClimb() {
				vm.$refs.tips.open({
					title: '重新攀登',
					content: '是否清除当前层数，重新攀登',
					btn1Text: '取消',
					btn2Text: '确定',
					btn2Click: () => { //用户点击确定
						vm.$request({
							url: 'againClimb',
							data: {
								climb_id: this.infor.info.id
							},
							success: res => {
								this.init();
							}
						})
					},
				})
			}
		},
		onHide() {
			uni.setStorageSync('isPLayMusic', vm.isPLayMusic)
			vm.pauseMusic()
		},
		onUnload() {
			uni.setStorageSync('isPLayMusic', vm.isPLayMusic)
			vm.pauseMusic()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;

		// height: 2636rpx;
		.box_climb {
			padding-top: 60rpx;

			.climb_item {
				.climb_img {
					width: 484rpx;
					height: 216rpx;
					margin-top: -40rpx;
				}

				.climb_img-2 {
					width: 750rpx;
					height: 590rpx;
					margin-top: -50rpx;
					z-index: 2;
				}

				.climb_img-3 {
					width: 478rpx;
					height: 452rpx;
					margin-bottom: -10rpx;
				}

				.floor {
					width: 68rpx;
					height: 66rpx;
					top: 30rpx;
					left: 220rpx;
				}

				.floor0 {
					top: 280rpx;
				}

				.firstClear {
					width: 100rpx;
					height: 114rpx;
					right: 210rpx;
					// background: url($img + 'climb_7.png') no-repeat 0 0 / 100% 100%;
					bottom: 40rpx;

					.firstClear_img {
						width: 48rpx;
						height: 48rpx;
						padding: 2rpx;
					}
				}
			}
		}

		.box_1 {
			top: 230rpx;
			padding: 0 30rpx;
			width: 100vw;

			.box1_music {
				width: 100rpx;
				height: 100rpx;
			}

			.rotate_animation {
				// animation: rotate 2s linear infinite;
				/* 使用名为 "rotate" 的动画，持续时间为2秒，线性运动，无限循环 */
			}

			@keyframes rotate {
				from {
					transform: rotate(0deg);
					/* 初始旋转角度为0度 */
				}

				to {
					transform: rotate(360deg);
					/* 最终旋转角度为360度，完整的一圈 */
				}
			}

			.box1_item {
				padding: 0 20rpx 0 0;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;

				.box1_icon {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.box_2 {
			width: 274rpx;
			top: 200rpx;
			right: 20rpx;

			.rank_head {
				width: 124rpx;
				height: 40rpx;
				margin: -20rpx auto 0;
			}

			.rank_list {
				width: 240rpx;
				height: 200rpx;
				// background: url($img + 'climb_12.png') no-repeat 0 0 / 100% 100%;
				padding: 50rpx 30rpx 0;

				.rank_item {
					.rank_icon {
						width: 30rpx;
						height: 24rpx;
					}

					.name {
						width: 100rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						text-shadow: 1px 1px 0 #150000, -1px -1px 0 #150000, 1px -1px 0 #150000, -1px 1px 0 #150000;
					}

					.topNum {
						padding-right: 20rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-shadow: 1px 1px 0 #150000, -1px -1px 0 #150000, 1px -1px 0 #150000, -1px 1px 0 #150000;
					}
				}

				.look_more {
					font-size: 22rpx;
					color: #E40D1D;
					text-align: center;
					margin: 18rpx auto 0;
				}
			}
		}

		.box_3 {
			width: 100rpx;
			left: 30rpx;
			top: 200rpx;

			.box3_icon {
				width: 96rpx;
				height: 104rpx;
			}
		}

		.mask_1 {
			width: 594rpx;
			height: 896rpx;
			padding: 42rpx 30rpx 0;

			.item_title {
				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-size: 32rpx;
				color: #FFFFFF;
				text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
			}

			.item_explain {
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.item_goods {
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border: 4rpx solid #000000;
				padding: 20rpx;
				box-sizing: border-box;

				.itme_change {
					height: 32rpx;
					background: linear-gradient(90deg, #E4690D 0%, rgba(228, 105, 13, 0.5753) 75%, rgba(228, 105, 13, 0) 100%);
					padding: 0 10rpx;
					font-size: 18rpx;
					color: #FFFFFF;
					top: 0;
					left: 0;
				}
			}
		}
	}
</style>